<template>
	<div class="swiper">
	<div class="swiper-container" id="one">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item,index) in imgs">
      	<img @click="open(index)" :src="item.url"/>
      	
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
  <div class="popover" v-if="flag" @click="flag=false">
			<div class="swiper-container" id="two">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="item in imgs">
						<img  :src="item.url" />
					</div>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
export default{
      name:"swiper",
      data(){
      	return{
      		flag:false,
			activeIndex:0
      	}
      },
      mounted(){
      	this.myswiper();
      },
      methods:{
      	open(index){
				this.flag = true;
				this.activeIndex = index;
				this.openswiper();
			},
			swiper() {
				var swiper = new Swiper('#one');
			},
				openswiper(){
				var _this = this;
				//监听v-if渲染完毕
				_this.$nextTick(function(){
					var swiper = new Swiper('#two',{
						initialSlide :_this.activeIndex,
					});
				})
			},
      	myswiper(){
      		 var swiper = new Swiper('#one', {
			      pagination: {
			        el: '.swiper-pagination',
		            loop:true,
		            speed: 400,
		            autoplay: true
			      },
			 });
      	}
      },
      props:["imgs"]
     
}
</script>

<style scoped="scoped">
.swiper-container {
		width: 100%;
		height: 100%;
	}
	.popover{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: black;
		z-index: 999;
	}
	img {
		width: 100%;
	}
	
	
	
	#one .swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	
	#two .swiper-slide {
      text-align: center;
      font-size: 18px;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
</style>